<template>
    <div id="tab-menu">
        <div @click="clickTab(item.class)" :class="activeTab == item.class ? 'active' : ''" v-for="(item, i) of menus"
            :key="i" class="item">
            {{ item.label }}
        </div>
    </div>
</template>

<script setup>
/* eslint-disable */
import {ref,defineProps} from 'vue'
const props = defineProps(['menus','activeTab','tabClickFun'])
var activeTab = ref('')
var tabClickFun = props.tabClickFun
activeTab.value = props.activeTab

const clickTab = (type)=>{
    activeTab.value = type 
    tabClickFun(type)
}
</script>

<style scoped>

#tab-menu {
    display: flex;
    display: -webkit-flex;
    height: 40px;
    justify-content: flex-start;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
}

#tab-menu  div {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}


#tab-menu  .active {
    border-bottom: 2px solid #409eff;
}
</style>